<template>
  <div>
    <div class="your_scores_container">
      <header class="your_scores"><span>{{score}}</span></header>
    <div class="scores_tip">{{scoreTips}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "score",
  data() {
    return {
      showHide: false, //是否显示提示
      score: 0, //分数
      scoreTips: "", //分数提示
      rightAnswer: [2, 7, 12, 13, 18], //正确答案
      scoreTipsArr: [
        "你说，是不是把知识都还给小学老师了？",
        "还不错，但还需要继续加油哦！",
        "不要嘚瑟还有进步的空间！",
        "智商离爆表只差一步了！",
        "你也太聪明啦，葡萄之家欢迎你！",
      ],
    };
  },
  computed:{
      answerid:function(){
          return this.$store.state.answerId
      }
  },
  created() {
    this.computedScore();
    this.getScoreTip();
  },
  methods: {
    //计算分数
    computedScore() {
      this.answerid.forEach((item, index) => {
        if (item == this.rightAnswer[index]) {
          this.score += 20;
        }
      });
    },
    //是否显示分享提示
    showCover: function () {
      this.showHide = !this.showHide;
    },
    //根据分数显示提示
    getScoreTip: function () {
      let index = Math.ceil(this.score / 20) - 1;
      this.scoreTips = this.scoreTipsArr[index];
    },
  },
};
</script>

<style lang="less">
body {
  background-image: url("../../images/4-1.jpg");
}
.your_scores_container {
  position: relative;
  top: 40px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 241px;
  height: 209px;
  background-image: url("../../images/4-2.png");
  background-size: contain;
  background-repeat: no-repeat;
  .your_scores {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 115px;
    span {
      font-size: 30px;
      font-weight: 900;
      font-family: Tahoma, Helvetica, Arial;
      color: #a51d31;
    }
  }
  .scores_tip {
    position: absolute;
    top: 160px;
    width: 85%;
    left: 50%;
    text-indent: 15px;
    color: #3e2415;
    transform: translate(-50%, 0);
    font-size: 14px;
  }
}
</style>